<template>
	<view>
		<view class="di"></view>
		
		<view class="wen_f zhong" style="margin-bottom: 0;" v-if="dawen==3">
		
			<view class="t1 tt1">恭喜获得 1 元现金红包</view>
			<view class="t1 tt2">恭喜获得[红旗连锁]商家现金抽奖机会</view>
			<view class="jiang">
				<view class="jiang_top">
					
					<view class="jiang_title">名称</view>
					<view class="jiang_title">类别</view>
					<view class="jiang_title">数量</view>
					<view class="jiang_title">抽奖时间</view>
					
				</view>
				<view class="xinxi">
					<view class="ww">
							<image src="@/static/img/jiang.png" class="j_img" mode="widthFix"></image>
					</view>
				
					<view class="ww">100元</view>
					<view class="ww">1 名</view>
					<view class="ww date">2024/12/12</view>
					
				</view>
				
				<view class="xinxi">
					<view class="ww">
							<image src="@/static/img/jiang.png" class="j_img" mode="widthFix"></image>
					</view>
				
					<view class="ww">100元</view>
					<view class="ww">1 名</view>
					<view class="ww date">2024/12/12</view>
					
				</view>
				
				<view class="xinxi">
					<view class="ww">
							<image src="@/static/img/jiang.png" class="j_img" mode="widthFix"></image>
					</view>
				
					<view class="ww">100元</view>
					<view class="ww">1 名</view>
					<view class="ww date">2024/12/12</view>
					
				</view>
				
					
			</view>
		
			<view class="ok" style="margin-top: 5%; margin-bottom: 5%;">参与</view>
		</view>	
		
		
		<view class="wen_f " v-if="dawen==2" >
			<view class="ok" style="margin-top: 15%; ">谢谢参与</view>
			

			
		</view>	
		<view class="wen_f" v-if="dawen==1">
			
			<view class="top">
				新人问答红包
			
			</view>
			
			<view class="main">
				<view class="store">
					<view class="tui">推广商家</view>
					
					<image src="@/static/img/logo.png" mode="widthFix" class="logo"></image>
					
					<view style="font-size: 20upx;">商家logo/门头照片</view>
				</view>
				
				
				<view class="wenti">红包问题</view>
				
				<view class="an">
					<view class="ju">
						品牌的口号
			
					</view>
					<view class="rows">
						<view class="txt">答案1</view>
						<view class="txt">格力电器就是好</view>
						<view class="yuan"></view>
						
					</view>
					<view class="rows">
						<view class="txt">答案1</view>
						<view class="txt">格力电器就是好2222</view>
						<view class="yuan"></view>
						
					</view>
					<view class="rows">
						<view class="txt">答案1</view>
						<view class="txt">格力电器就是好1111</view>
						<view class="yuan"></view>
						
					</view>
					<view class="rows">
						<view class="txt">答案1</view>
						<view class="txt">格力电器就是好22222222</view>
						<view class="yuan"></view>
						
					</view>
					
					
				</view>
				
			
			<view class="ok" @tap="ok">提交</view>
			
			</view>
			
			
			
		</view>
		
	</view>
	
</template>

<script>

	export default {
		components: {
			
		},
		data(){
			return {
				dawen:0
			}
			
		},
		methods:{
			ok(){
				this.dawen=2
			}
			
		}
	
	}
</script>

<style scoped>
	.wen_f{
		position: fixed;
		
		 top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  z-index: 99;
		  background-color: #fff;
		  width: 88%;
		border-radius: 15upx;
	}
	.top{
		color: #3D3D3D;
		font-size: 35upx;
		text-align: center;
		margin-top: 15%;
	}
	.main{
		width: 90%;
		margin: 0 auto;
	}
	.store{
		display: flex;
		margin-top: 8%;
		align-items: center;
	}
	.logo{
		width: 250upx;
		margin-left: 5%;
		margin-right: 5%;
	}
	.tui{
		color: #3D3D3D;
		font-weight: 600;
		font-size: 25upx;
	}
	.wenti{
		color: #3D3D3D;
		font-size: 33upx;
		font-weight: 550;
		margin-top: 5%;
	}
	.an{
		width: 100%;
		border: 1px solid #A5A5A5;
		margin-top: 5%;
		padding-left: 3%;
		padding-right: 3%;
		border-radius: 15upx;
	}
	.ju{
		text-align: center;
		margin-top: 3%;
		margin-bottom: 3%;
	}
	.rows{
		display: flex;
		justify-content: space-between;
		margin-top: 3%;
		margin-bottom: 3%;
	}
	.yuan{
		border: 1px solid #A5A5A5;
		width: 40upx;
		height: 40upx;
		border-radius: 100%;
	}
	.txt{
		display: flex;
		
	
	}
	.ok{
		background-color: #FC0000;
		color: #FFFFFF;
		width: 450upx;
		height: 100upx;
		font-size: 40upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 10%;
		padding-top: 3%;
		padding-bottom: 3%;
		border-radius: 45upx;
		margin-bottom: 15%;
	}
	.di{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.6;
		z-index: 0;
	}
	.t1{
		text-align: center;
	}
	.zhong{
		padding-top: 5%;
		padding-bottom: 5%;
	}
	.tt1{
		color: #3D3D3D;
		font-size: 35upx;
		font-weight: 600;
	}
	.tt2 {
		color: #3D3D3D;
		margin-top: 5%;
	}
	.jiang{
		width: 90%;
		border: 1px solid #929292;
		margin: 0 auto;
		margin-top: 8%;
		padding: 3%;
		border-radius: 15upx;
	}
	.jiang_top{
		width: 100%;
		display: flex;
		border-bottom: 1px solid #D8D8D8;
		padding-bottom: 2%;
		
	}
	.jiang_title{
		width: 25%;
		color: #3D3D3D;
		display: flex;
		justify-content: center;
	}
	.xinxi{
		display: flex;
		margin-top: 5%;
	}
	.ww{
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #3D3D3D;
		font-weight: 600;
	}
	.j_img {
		width: 100upx;
		margin: 0 auto;
		display: block;
	}
	.date{
		color: #FC0000;
	}
</style>